<template>
  <div class="main">
    <van-nav-bar
      title="修改昵称"
      right-text="保存"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-field
      class="field"
      v-model="nickName"
      rows="1"
      autosize
      label="昵称"
      type="textarea"
      maxlength="20"
      show-word-limit
    />
  </div>
</template>

<script>
import { updateUserDetail } from "@/api/api";
import { Toast } from "vant";
export default {
  name: "updateUserName",
  
  data: function () {
    return {
      nickName: this.$store.state.nickName,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      updateUserDetail({
        id: localStorage.getItem("setUserID"),
        username: this.nickName,
      })
      .then((res)=>{
          console.log(res)
          if (res.returncode === 200) {
              Toast.success(res.description);
              this.$store.commit("saveNickName", this.nickName);
              this.$router.go(-1);
            } else if (res.returncode === 400) {
              Toast.fail(res.description);
            }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
  position: absolute;
}
.field {
  margin: 20px;
  width: auto;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
}
</style>